<template>
    <div>
        <Modal :mask-closable="false" v-model="importPrrShowState" :title="`${$t('ledger.uploadFiles')}`"
            class-name="docImportModal vertical-center-modal modal-content-layout" :closable="false">
            <div class="content">
                <div class="upload">
                    <div style="display:flex">
                        <strong style="display: inline-block;width: 40px;height:40px;">{{ $t('doc.Des') }}</strong>
                        <!--                        <strong style="display: inline-block;width: 10px;color:red">*</strong>-->
                        <Input maxlength="100" v-model="describe" show-word-limit type="textarea"
                            :placeholder="`${$t('common.inputInfo')}`" />
                    </div>
                    <div class="importBtn">
                        <Upload :before-upload="beforeUpload" :show-upload-list="false" multiple type="drag" action="">
                            <img src="~images/common/importImg.png" alt />
                        </Upload>
                    </div>
                    <span class="mb16">{{ $t('common.importfile') }}</span>
                </div>

                <Progress :percent="uploadProgress" :stroke-width="20" v-show="uploadProgress > 0" status="active"
                    text-inside />
                <button class="closeBtn" @click="clickImportModal" v-show="uploadProgress === 0">{{ $t('common.close')
                }}</button>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "docImport",
    props: ["selectTreeId", "attachmentBelongTo"],
    data() {
        return {
            importPrrShowState: false,
            describe: "",
            uploadProgress: 0
        };
    },
    methods: {
        clickImportModal() {
            this.importPrrShowState = false;
        },
        show() {
            this.uploadProgress = 0;
            this.importPrrShowState = true;
            this.describe = ''
        },
        //文件上传
        beforeUpload(file) {
            let $this = this;
            /*if (!this.describe) {
                this.$Message.warning("请输入文件描述!!");
                return false;
            }*/
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            if (this.$route.query.deviceMId) {
                formData.append("deviceMId", this.$route.query.deviceMId)
            }
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
                onUploadProgress(progress) {
                    $this.uploadProgress = Math.round(progress.loaded / progress.total * 100) - 1;
                }
            }).then(res => {
                if (res.code == 200) {
                    const fileInfo = res.data
                    this.axios({
                        method: 'post',
                        url: '/dms/documentAttachment/add',
                        data: {
                            folderHierarchyId: this.selectTreeId,
                            attachmentBelongTo: this.attachmentBelongTo,
                            fileName: fileInfo.fileName,
                            fileDescription: this.describe,
                            filePath: fileInfo.filepath,
                            fileUrl: fileInfo.fileUrl,
                            suffix: fileInfo.suffix,
                            fileSize: fileInfo.fileLength,
                            deviceMId: this.$route.query.deviceMId
                        },
                    }).then(res => {
                        if (res.code == 200) {
                            this.importPrrShowState = false
                            this.$emit('importPrrBtn')
                            this.$Message.success('上传成功！')
                        } else {
                            this.$Message.warning({
                                content: res.msg,
                                duration: 6,
                                closable: true,
                            });
                        }
                    })
                }
            })
            return false
        },
    },
};
</script>

<style lang="scss">
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}

.ivu-spin-fix {
    background: rgba(0, 0, 0, 0.5);
}

.docImportModal {
    .content {
        height: 380px;

        .upload {
            .importBtn {
                position: relative;
                width: 175px;
                margin: 0 auto;
                margin-top: 30px;
                text-align: center;

                img {
                    width: 175px;
                    height: 150px;
                    margin-left: -35px;
                    margin-bottom: 20px;
                }

                input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }

                .ivu-upload:hover {
                    /*padding-left: 1px;*/
                    /*padding-top: 1px;*/
                    border-color: #ffffff;
                }
            }

            span {
                display: block;
            }

            span {
                margin-bottom: 50px;
                font-size: 13px;
                text-align: center;
                line-height: 15px;
                color: #333;
            }
        }

        .uploadSucc,
        .uploadErr {
            text-align: center;

            i {
                margin-top: 70px;
                margin-bottom: 45px;
                font-size: 50px;
                color: #1294f7;
            }

            span {
                display: block;
                margin-bottom: 90px;
                font-size: 13px;
                line-height: 13px;

                a {
                    position: relative;
                    text-decoration: underline;
                    color: #2296f4;

                    input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                }
            }
        }

        .uploadErr {
            i {
                color: #ff3e68;
            }
        }

        .closeBtn {
            display: block;
            width: 140px;
            height: 40px;
            margin: 0 auto;
            color: #333;
            border: none;
            background-color: #eee;
            cursor: pointer;
        }

        .closeBtn:hover {
            opacity: 0.8;
        }
    }

    &.vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal {
            top: 0;
        }
    }

    .ivu-upload-drag {
        border-width: 1px;
        border-color: #fff;
    }

    .ivu-upload-drag:hover,
    .ivu-upload-dragOver {
        border-color: #2d8cf0;
    }

    .continue {
        display: inline-block;
        color: #2296f4;
        cursor: pointer;

        .con {
            text-decoration: underline;
            font-weight: normal;
        }
    }
}
</style>
